<template>
  <div class="search-body">
    <div class="search-box">
      <el-input
        size="small"
        placeholder="搜索"
        prefix-icon="el-icon-search"
        @focus="visible = true"
        @input="handleSearch"
        v-model="keyword"
      ></el-input>
    </div>
    <div class="search-result-box" v-show="visible">
      <p class="search-meta">按关键字搜索</p>
      <div class="users" v-show="searchResult.length > 0">
        <searchItem
          v-for="(item, key) in searchResult"
          :key="key"
          :keyword="keyword"
          :conversation="item"
          class="user"
          :class="{ 'active': item.id == selected.id }"
          @click="handleClick(item)"
        ></searchItem>
      </div>
      <div class="no-result-box" v-show="noSearchResult">
        <p>没有找到包含下列关键字的结果</p>
        <p>
          <i style="color: #1890ff">{{ keyword }}</i>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup>
import '../../assets/group.css'
import searchItem from './SearchItem.vue'
import { reactive, toRefs } from "vue"
import { searchConversation } from '../../api/conversation'

const emit = defineEmits(['handleSelected'])

const state = reactive({
  keyword: null,
  visible: false,
  searchResult: [],
  noSearchResult: false,
  selected: {},
})

const handleSearch = async () => {
  state.noSearchResult = false
  if (!state.keyword) {
    state.searchResult = []
    return
  }

  let result = await searchConversation(state.keyword)
  if (result.status == 'success') {
    if (result.data && result.data.length > 0) {
      state.searchResult = result.data
    } else {
      state.noSearchResult = true
      state.searchResult = []
    }
  }
}

const handleClick = (user) => {
  state.selected = user
  emit("handleSelected", user)
}

//如果点击的不是搜索框部分则隐藏搜索框和内容
document.body.addEventListener("click", (e) => {
  let element = document.querySelector(".search-body");
  if (!element) {
    return
  }
  if (!element.contains(e.target)) {
    state.keyword = ""
    state.visible = false
    state.selected = {}
    state.searchResult = []
  }
}, false)

const { keyword, visible, searchResult, noSearchResult, selected } = toRefs(state)

</script>
<style scoped>
.search-body {
  position: relative;
}

.search-box {
  display: flex;
}

.search-result-box {
  box-sizing: border-box;
  width: 280px;
  height: 400px;
  box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
  transition: all 0.2s;
  transform: translateZ(0);
  background-color: white;
  position: absolute;
  z-index: 10000;
  top: 40px;
  border-radius: 3px;
  font-size: 12px;
}

.search-meta {
  height: 40px;
  line-height: 40px;
  margin: 0;
  text-indent: 10px;
  /*color: rgba(0, 0, 0, 0.85);*/
  color: #303133;
  border-bottom: 1px solid #eee;
}

.users {
  padding: 0 5px 5px 5px;
  height: 360px;
  overflow: auto;
  box-sizing: border-box;
}

i {
  font-style: normal;
}

.no-result-box {
  text-align: center;
  margin-top: 100px;
  color: #aaa;
}

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

/*滑块*/
::-webkit-scrollbar-thumb {
  background-color: #e6e6e6;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
</style>
